<template>
    <div class="list">

     <!-- 头部搜索 -->
        <el-form :inline="true" :model='$store.state.survey.selectData' class="demo-form-inline">
        
            <el-form-item>
                <el-input placeholder="姓名"  v-model='$store.state.survey.selectData.name'></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="手机号码"  v-model='$store.state.survey.selectData.phone'></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="年龄"  v-model='$store.state.survey.selectData.age'></el-input>
            </el-form-item>
            <el-form-item >
                <el-cascader clearable
                            :options="city"
                            v-model='$store.state.survey.selectData.address'
                            placeholder="城市"
                            filterable>
                            </el-cascader>
            </el-form-item>
            <!-- 
            <el-form-item >
                <el-select v-model="$store.state.survey.selectData.etype" clearable placeholder="患者用药时间">
                    <el-option
                    v-for="item in eType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
-->
           
           <br>
            <el-form-item>
                <el-button type="primary" @click='onSelectData'>查询</el-button>
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click='onCleanSelectData'>清空条件</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="downloadExl(1)">导出本页数据</el-button>
                <el-button type="primary"  @click="downloadExlAll()">导出全部数据</el-button>
                <a href="" :download="downloadName" id="hf"></a>
            </el-form-item>       
        </el-form>
        <div class="divline"></div>

        <el-table :data="$store.state.survey.tableData" border style="width: 100%" align='center'>
            <el-table-column
                :prop="fields.createdAt.info.prop"
                :label="fields.createdAt.info.label"
                :align="fields.createdAt.style.align"
                :width="fields.createdAt.style.width">
                <template scope="scope"><!--scope.row-->
                    <p>{{formatterTime(scope.row.time)}}</p>
                 </template>
            </el-table-column>
            <el-table-column
                :prop="fields.name.info.prop"
                :label="fields.name.info.label"
                :align="fields.name.style.align"
                :width="fields.name.style.width"
                :sortable="fields.name.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.sex.info.prop"
                :sortable="fields.sex.info.sortable"
                :label="fields.sex.info.label"
                :align="fields.sex.style.align"
                :width="fields.sex.style.width"
                :formatter="formatterSex"
                :filters="fields.sex.filter.list"
                :filter-method="filterSex"
                :filter-multiple="fields.sex.filter.multiple">
            </el-table-column>
            <!--<el-table-column
                :prop="fields.age.info.prop"
                :label="fields.age.info.label"
                :align="fields.age.style.align"
                :width="fields.age.style.width"
                :sortable="fields.age.info.sortable">
            </el-table-column>-->
            <el-table-column
                :prop="fields.phone.info.prop"
                :label="fields.phone.info.label"
                :align="fields.phone.style.align"
                :width="fields.phone.style.width"
                :sortable="fields.phone.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.address.info.prop"
                :label="fields.address.info.label"
                :align="fields.address.style.align">
            </el-table-column>
            <el-table-column
                :prop="fields.etype.info.prop"
                :label="fields.etype.info.label"
                :align="fields.etype.style.align"
                :width="fields.etype.style.width"
                :sortable="fields.etype.info.sortable"
                :formatter="formatterType"
                :filters="fields.etype.filter.list"
                :filter-method="filterType"
                :filter-multiple="fields.etype.filter.multiple">
            </el-table-column>
            <el-table-column
                :prop="status.info.prop"
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :sortable="status.info.sortable"
                :formatter="formatterStatus"
                :filters="status.filter.list"
                :filter-method="filterStatus"
                :filter-multiple="status.filter.multiple">
            </el-table-column>
            <el-table-column
                :prop="fields.actions.info.prop"
                label=""
                :align="fields.actions.style.align"
                >
                 <template scope="scope"><!--scope.row-->
                    <el-button type="text" @click="showDetailDialog(scope.row)">查看问卷</el-button>                                            
                 </template>
            </el-table-column>
            
        </el-table>
        <!--用户详情信息-->
        <el-dialog :title="`${formatterType(detailData)}问卷详细信息`" v-model="dialogDetailVisible">
           <!-- 
               <div v-for="(block, index) in detailData.answer">
                <p>{{index + 1}}、<span style="color:#999">{{block.stem}}</span></p>
                <p>患者答案:<span style="color:#999">{{block.value}} {{block.remark}}</span></p>
            </div>
            -->
            <el-button type="primary"  @click="downloadExl(2)">导出</el-button>
             <el-table :data="detailData.answer"  border>
                <el-table-column property="index" label="题号" align="center" width='80'>
                 <template scope="scope"><!--scope.row-->
                    {{scope.$index + 1}}
                 </template>
                </el-table-column>
                <el-table-column property="question" label="题目" align="center">
                    <template scope="scope"><!--scope.row-->
                       {{scope.row.stem}}
                    </template>
                </el-table-column>
                <el-table-column property="answer" label="患者回答" align="center">
                     <template scope="scope"><!--scope.row-->
                       {{scope.row.value}} {{scope.row.remark}}
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="detailData.images.length > 1" v-for="(url,index) in detailData.images" style="position:relative; display:inline;">
                <img  :src="url" style="width:200px;height:200px;margin-top:10px;margin-left:50px;margin-buttom:50px;"></img>
                <div style="position:absolute; z-index:2; left:10px; top:20px">
            　　  <div style="margin-left:100px;">{{index == 0 ? '左眼' : '右眼'}}结膜照片</div>
                 <div v-if="detailData.leftEye">{{index == 0 ? '左眼' : '右眼'}}状态:
                    <div v-if="index == 0" style="margin-left:50px;">
                      {{formattIndex(detailData.leftEye.colorIndex)}} 色值: {{detailData.leftEye.colorValue}} <font class="font-color" v-bind:style="{ background:detailData.leftEye.colorValue}">______</font>
                    </div>
                    <div v-else style="margin-left:50px;">
                      {{formattIndex(detailData.rightEye.colorIndex)}} 色值: {{detailData.rightEye.colorValue}} <font class="font-color" v-bind:style="{ background:detailData.rightEye.colorValue}">______</font>
                    </div>
                 </div>
            　　 </div>
            </div>
            <div style="width:100%;height:50px;"></div>
            <div>


　　

</div>
        </el-dialog>

       <!-- 分页 -->
        <div class="block">
            <el-pagination
            style="margin-top:10px;"
            align="center"
            @current-change="handleCurrentChange"
            :current-page="$store.state.survey.currentPage"
            :page-size="tableCount"
            :layout="layout"
            :total="$store.state.survey.tableTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import ListJs from './List.js';
    module.exports=ListJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .font-color {
      color:rgba(0,0,0,0);
  }
</style>
